<template>
	<div class="panel-container">
		<panelTitle
			title="当日实到人数"
			sub-title="NUMBER OF ACTUAL ARRIVALS ON THE DAY"
      :bg-type="2"
		>
    <div class="more-btn">查看详情></div>
  </panelTitle>

		<div class="panel-content">
			<div class="item">
				<div class="count">{{ formModel.t1 }}</div>
				<div class="count-desc">实到总人数</div>
				<div class="item-pic"></div>
			</div>
			<div class="item">
				<div class="count">{{ formModel.t2 }}</div>
				<div class="count-desc">正式</div>
				<div class="item-pic"></div>
			</div>
			<div class="item">
				<div class="count">{{ formModel.t3 }}</div>
				<div class="count-desc">劳务</div>
				<div class="item-pic"></div>
			</div>
			<div class="item">
				<div class="count">{{ formModel.t4 }}</div>
				<div class="count-desc">分包</div>
				<div class="item-pic"></div>
			</div>
			<div class="item">
				<div class="count">{{ formModel.t5 }}</div>
				<div class="count-desc">业主</div>
				<div class="item-pic"></div>
			</div>
			<div class="item">
				<div class="count">{{ formModel.t6 }}</div>
				<div class="count-desc">其他</div>
				<div class="item-pic"></div>
			</div>
		</div>
	</div>
</template>

<script setup name="actual-number-of-attendees">
// 当日实到人数
import { ref } from 'vue'

import panelTitle from '../panel-title/index.vue'

const formModel = ref({
	t1: '1,201',
	t2: '618',
	t3: '311',
	t4: '213',
	t5: '32',
	t6: '7',
	t7: '',
})
</script>

<style lang="scss" scoped>
.panel-content {
  // 设计稿 1920px 下， 这块内容是 912px
	width: 100%;
  // 224px
	height: 11.666667vw;
	box-sizing: border-box;

	background: linear-gradient(
		360deg,
		rgba(56, 185, 255, 0.16) 0%,
		rgba(56, 185, 255, 0) 100%
	);
	border: 1px solid;
	border-image: linear-gradient(
			360deg,
			rgba(56.000000461936, 185.00000417232513, 255, 1),
			rgba(56.000000461936, 185.00000417232513, 255, 0.11999999731779099)
		)
		1 1;
    border-top: none;

	padding: 1.927083vw 1.354167vw 1.666667vw 1.354167vw;

	display: flex;
	column-gap: 0.833333vw;
	flex-wrap: nowrap;

	.item {
    // 平分
    flex: 1;
    flex-shrink: 0;
		text-align: center;
	}

	.item-pic {
    // 宽130
		// width: 6.770833vw;
    // 这里应该写100% 因为父盒子 .item 已经通过 flex: 1 计算出来了宽度，这里就不要使用 vw响应式，否则在屏幕缩小的时候，vw计算出来的大小跟等比缩小后的上面文字不等宽
    width: 100%;
    // 高104
		height: 5.416667vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	}

	.count {
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: 700;
		font-size: 1.666667vw;
		line-height: 1.666667vw;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.count-desc {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 0.625vw;
		text-align: center;
		font-style: normal;
		text-transform: none;

		margin-top: 6px;
	}

	// 填充图片

	.item:nth-child(1) > .item-pic {
		background-image: url('@/assets/images/01/001.png');
	}
  .item:nth-child(2) > .item-pic {
		background-image: url('@/assets/images/01/002.png');
	}
  .item:nth-child(3) > .item-pic {
		background-image: url('@/assets/images/01/003.png');
	}
  .item:nth-child(4) > .item-pic {
		background-image: url('@/assets/images/01/004.png');
	}
  .item:nth-child(5) > .item-pic {
		background-image: url('@/assets/images/01/005.png');
	}

  .item:nth-child(6) > .item-pic {
		background-image: url('@/assets/images/01/006.png');
	}
}


.more-btn {
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: 700;
  font-size: 0.729167vw;
  text-shadow: 0px 0px 0.416667vw rgba(102, 255, 255, 0.46);
  text-align: right;
  font-style: normal;
  text-transform: none;

  margin-right: 0.520833vw;

  background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);
  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  background-clip: text;
  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
}
</style>
